<template>
  <el-dialog
    title="上传文件"
    :visible.sync="show"
    width="400px"
    @close="$emit('update:visible', false)"
    append-to-body
    class="business-dialog"
  >
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :data="extraParams"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="handleBefore"
      :on-change="handleChange"
      :file-list="fileList"
      :limit="2"
      accept=".xls,.xlsx"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传xls/xlsx文件，<span @click="downTemp">点击此处下载导入模板</span>
      </div>
    </el-upload>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'

export default {
  name: 'UploadModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    extraParams: {
      type: Object,
      default() {
        return {}
      }
    },
    uploadUrl: {
      type: String,
      default: ''
    },
    downloadUrl: {
      type: String,
      default: ''
    },
    downloadName: {
      type: String,
      default: ''
    },
    downloadMethod: {
      type: String,
      default: 'post'
    }
  },
  watch: {
    visible(val) {
      this.show = val
      if (!val) {
        // 关闭弹窗后，删掉选择的文件
        this.fileList = []
      }
    }
  },
  data() {
    return {
      show: this.visible,
      loading: false,
      fileList: []
    }
  },
  methods: {
    submit() {
      this.$refs.upload.submit()
    },
    cancel() {
      this.show = false
      // 关闭弹窗后，删掉选择的文件
      this.fileList = []
    },
    handleSuccess(res) {
      this.loading = false
      this.$refs.upload.clearFiles()
      if (res.data) {
        Message.success('上传成功')
        this.$emit('success')
        this.show = false
      } else {
        Message({
          type: 'error',
          message: res?.errMessage || res?.msg || '上传失败',
          showClose: true,
          duration: 0
        })
        this.$emit('error')
      }
    },
    handleError(err) {
      this.loading = false
      Message.error(err?.message || err?.msg || '上传失败')
      this.$emit('error')
    },
    handleBefore(file) {
      const typeArr = file.name.split('.')
      const type = typeArr[typeArr.length - 1]
      if (!['xlsx', 'xls'].includes(type)) {
        Message.info('只能上传xls/xlsx文件')
        return false
      }
      this.loading = true
    },
    downTemp() {
      window.location.href = window.location.origin + this.downloadUrl
    },
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      this.fileList = fileList
      if (file.length > 1) {
        file.splice(0, 1)
      }
    }
  }
}
</script>
<style scoped>
.el-upload__tip span {
  cursor: pointer;
}
</style>
